Creating a Basic Grid

Using Spread.Views, you can generate grid columns automatically by retrieving the data from JSON files. Use the following steps to create a basic grid layout.

Adding a Basic Grid

Add the JavaScript for the page. The following code is a general example.

 <!DOCTYPE html>
  <html>
  <head>
      <title>Spread.Views test page</title>

Add reference scripts. The gc.spread.common.js and gc.spread.views.dataview.js references provide the core features of Spread.Views and gc.spread.views.gridlayout.js provides a grid layout for use.

   <script src="[Your Script Path]/gc.spread.common.10.1.1.min.js" type="text/JavaScript"></script>
   <script src="[Your Script Path]/gc.spread.views.dataview.10.1.1.min.js" type="text/JavaScript"></script>
   <script src="[Your Script Path]/gc.spread.views.gridlayout.10.1.1.min.js" type="text/JavaScript"></script>
   <style>
           * {
               -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
           }
       </style>

Add CSS files to customize the appearance. Use the gc.spread.views.dataview.10.1.1.css file for the default appearance.
```
   <link rel="stylesheet" href="[Your Stylesheet Path]/gc.spread.views.dataview.10.1.1.css" type="text/css">
```

Add the product license.

 <script src="[Your Script Path]/license.js" type="text/javascript"></script>

Add the column definition.

  var countries = ['US,Germany,UK,Japan,Italy,Greece'];
              var data=[];
               for(var i = 0; i<100; i++){
                   data.push({
                       id:i,
                       country:countries[i%countries.length],
                       date: new Date(2015, i % 12, i % 28),
                       amount:Math.floor(Math.random()*10000),
                       active:i%4===0
                   });
               }

Add the initialization code for the Spread.Views control in a DOM (Document Object Model) element with grid1 as the ID.

 var dataView = new GC.Spread.Views.DataView(document.getElementById('grid1'), data, new GC.Spread.Views.Plugins.GridLayout());

Create the target DOM element for the Spread.Views control.

 <body style="margin:0;position:absolute;top:0;bottom:0;left:0;right:0;font-size:14px;">
   <div id="grid1" style="height:100%"></div>

Note: The licensekey.js file should contain the following license string. Replace the text in quotes with your actual license key string.

GC.Spread.Views.LicenseKey = "your license key";